// import useStore from '@/store';
import {
  createRouter,
  createWebHashHistory,
  type RouteRecordRaw,
} from 'vue-router';

// 指定 RouteRecordRaw[] 类型后，书写的时候就有 TS 的类型提示和检查了
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('@/views/Layout/index.vue'),
    children: [
      //二级路由
      { path: '/', component: () => import('@/views/Home/index.vue') },
      {
        path: 'register',
        component: () => import('@/views/Register/index.vue'),
      },
      {
        path: 'new',
        component: () => import('@/views/New/index.vue'),
      },
      {
        path: 'comment/:id',
        component: () => import('@/views/Comment/index.vue'),
      },
      { path: 'forget', component: () => import('@/views/Forget/index.vue') },
      {
        path: 'category/sub/:id?', //二级分类
        component: () => import('@/views/Sub/index.vue'),
      },
      {
        path: 'category/:id?', //一级分类
        component: () => import('@/views/Category/index.vue'),
      },
      {
        path: 'goods/:id?', // 商品详情
        component: () => import('@/views/Goods/index.vue'),
      },
      {
        path: 'cart', //购物车
        component: () => import('@/views/Cart/index.vue'), //8
      },
      {
        path: 'member/checkout', //
        component: () => import('@/views/Member/Checkout/index.vue'),
      },
      // {
      //   path: '/pay',
      //   component: () => import('@/views/Pay/index.vue'),
      // },
      // {
      //   path: '/pay/callback',
      //   component: () => import('@/views/Pay/callback.vue'),
      // },
      {
        path: 'member',
        component: () => import('@/views/Member/Layout/index.vue'),
        children: [
          //三级路由
          {
            path: '',
            component: () => import('@/views/Member/Home/index.vue'),
          },
          {
            path: 'order',
            component: () => import('@/views/Member/Order/index.vue'),
          },
          {
            path: 'info',
            component: () => import('@/views/Member/Info/index.vue'),
          },
          {
            path: 'safe',
            component: () => import('@/views/Member/Safe/index.vue'),
          },
          {
            path: 'safe/mobile',
            component: () => import('@/views/Member/Safe/Mobile/index.vue'),
          },
          {
            path: 'address',
            component: () => import('@/views/Member/Address/index.vue'),
          },
          {
            path: 'foot',
            component: () => import('@/views/Member/Foot/index.vue'),
          }, //15
          {
            path: 'comment',
            component: () => import('@/views/Member/Comment/index.vue'),
          },
          // {
          //   path: 'checkout',
          //   component: () => import('@/views/Member/Checkout/index.vue'),
          // },
          {
            path: 'pay',
            component: () => import('@/views/Member/Pay/index.vue'),
          },
          {
            path: 'collect',
            component: () => import('@/views/Member/Collect/index.vue'),
            redirect: 'member/collect/goods',
            children: [
              //四级路由
              {
                path: 'goods',
                component: () =>
                  import('@/views/Member/Collect/Goods/index.vue'),
              },
              {
                path: 'special',
                component: () =>
                  import('@/views/Member/Collect/Special/index.vue'),
              },
              {
                path: 'brand',
                component: () =>
                  import('@/views/Member/Collect/Brand/index.vue'),
              },
            ],
          },
        ],
      },
    ],
  },
  { path: '/login', component: () => import('@/views/Login/index.vue') }, //一级路由
  // {
  //   path: '/login/callback',
  //   component: () => import('@/views/Login/callback.vue'),
  // },

  //测试
  // { path: '/test', component: () => import('@/views/Test/index.vue') },
];

// 创建路由实例
const router = createRouter({
  // 创建 hash 路由模式
  history: createWebHashHistory(),
  // 路由规则
  routes,
  // VueRouter@4官网 - 进阶 - 滚动行为
  scrollBehavior: () => {
    // 始终滚动到顶部
    return { top: 0 };
  },
});

// 📌需求：已登录的用户才允许访问个人中心。
// （未登录怎么？跳转到登录页并携带回跳地址）
// 导航守卫 - 全局前置守卫
// VueRouter4升级: return 取代了以前的 next() 放行函数
// return true 或 undefined(没写return) 都默认放行
// router.beforeEach((to) => {
//   const { member } = useStore();
//   // 进行判断：未登录情况但是访问 /member 开头的路径，需要跳转登录页
//   if (!member.isLogin && to.path.startsWith('/member')) {
//     return `/login?target=${to.fullPath}`;
//   }
// });

export default router;
